<template>
  <div>
    <h2>个人信息</h2>
    <div class="form">
      <label for="name">
        <span>姓名：</span>
        <input
          :class="className.name"
          type="text"
          id="name"
          v-model="name"
          :disabled="edit"
        />
        <em v-show="nameIn">*姓名不能为空且只能由字母、数字、下划线组成</em>
      </label>
      <label for="tel">
        <span>电话号码：</span>
        <input
          :class="className.tel"
          type="text"
          id="tel"
          v-model="tel"
          :disabled="edit"
        />
        <em v-show="telIn">*不能为空且全部为数字</em>
      </label>
      <label for="psw">
        <span>密码：</span>
        <input
          :class="className.psw"
          type="text"
          id="psw"
          v-model="psw"
          :disabled="edit"
        />
        <em v-show="pswIn">*密码不少于6位且只能由字母、数字、下划线组成</em>
      </label>
      <label v-if="edit">
        <span></span>
        <button class="nomal large" @click="edit = false">编辑信息</button>
      </label>
      <label class="editing" v-else>
        <span></span>
        <button
          :class="{ save: !save, return: save }"
          @click="change"
          :disabled="save"
        >
          保存
        </button>
        <button class="return" @click="notChange">返回</button>
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["own"],
  data() {
    return {
      name: this.own.name,
      tel: this.own.tel,
      psw: this.own.psw,
      edit: true,
      nameIn: false,
      telIn: false,
      pswIn: false,
    };
  },
  methods: {
    change() {
      if (this.name && this.tel && this.psw) {
        this.edit = true;
        this.$emit("changeOwn", {
          name: this.name,
          tel: this.tel,
          psw: this.psw,
        });
      }
    },
    notChange() {
      this.edit = true;
      this.name = this.own.name;
      this.tel = this.own.tel;
      this.psw = this.own.psw;

      this.nameIn = false;
      this.telIn = false;
      this.pswIn = false;
    },
  },
  computed: {
    // 是否禁用保存按钮
    save: function () {
      this.nameIn = /\W/g.test(this.name) || this.name.length < 1;
      this.telIn = /\D/g.test(this.tel) || this.tel.length < 1;
      this.pswIn = this.psw.length < 6 || /\W/g.test(this.psw);

      var result = !(!this.nameIn && !this.telIn && !this.pswIn);
      return result;
    },
    className: function () {
      return {
        name: {
          read: this.edit,
          error: this.nameIn,
        },
        tel: {
          read: this.edit,
          error: this.telIn,
        },
        psw: {
          read: this.edit,
          error: this.pswIn,
        },
      };
    },
  },
};
</script>

<style>
@import "../assets/css/own.css";
</style>
